<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="6">
        <el-button type="primary" @click="showDialog">新增学员</el-button>
      </el-col>
      <el-col :span="6" class="addmany">
        <el-button type="primary" class="btn" @click="inputFile">多个新增</el-button>
        <input type="file" ref="getfile" accept=".xlsx" class="file" @change="getFile" />
      </el-col>
      <el-col :span="6">
        <el-button type="primary" @click="downTemplate">模板下载</el-button>
      </el-col>
      <el-col :span="6">
        <el-button type="primary" @click="exportUserInfo">导出学员信息</el-button>
      </el-col>
    </el-row>
    <el-dialog v-model="dialogVisible" title="新增单个学员" width="400px">
      <el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" label-width="120px" class="demo-ruleForm">
        <el-form-item label="学员姓名" prop="username">
          <el-input v-model="ruleForm.username" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm(ruleFormRef)">添加</el-button>
          <el-button @click="resetForm(ruleFormRef)">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script lang='ts' setup>
import { reactive, ref } from 'vue';
import { registe } from '@/serveice/userinfo';
import type { FormInstance } from 'element-plus';
import { importsExcel, exportExcel } from '@/utils/excel.js';
let emits = defineEmits(['addList']);
let props = defineProps(['list']);
const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive({
  username: '', //学员姓名
})
const dialogVisible = ref(false);//控制对话框显示
const rules = reactive({
  username: [
    { required: true, message: '学员姓名不能为空', trigger: 'blur' },
    { min: 2, max: 12, message: '学员姓名长度2-12位', trigger: 'blur' }
  ],
})
const getfile = ref();

function exportUserInfo() {
  exportExcel([
    { title: "编号", dataIndex: "_id", key: "_id" },
    { title: "姓名", dataIndex: "username", key: "username" },
    { title: "类别", dataIndex: "type", key: "type" }
  ],
    props.list.map((item: any) => {
      item.type = item.usertype == 2 ? "学生" : "不明身份";
      return item;
    }),
    "2215班所有学生信息.xlsx"
  );
}

function downTemplate() {
  let url = "/api/file/批量新增学员模板.xlsx";
  let a = document.createElement("a");
  a.href = url;
  a.click();
  a.remove();
}
async function getFile(excel: any) {
  console.log(excel);

  let list = await importsExcel(excel);
  let { data } = await registe({ list });

  console.log(list);//把这个集合给后端
  //新增成功
  if (data.code == 200) {
    emits("addList", data.list);
  } else {
    alert("部分用户已存在:" + data.list);
  }

}
function inputFile() {
  getfile.value.click()
}

function showDialog() {
  dialogVisible.value = true//显示对话框
}

function submitForm(formEl: FormInstance | undefined) {
  if (!formEl) return;
  formEl.validate(async (valid) => {
    if (valid) {
      let list = [
        {
          '姓名': ruleForm.username
        }
      ]
      let { data } = await registe({ list })
      if (data.code == 200) {
        resetForm(ruleFormRef.value);//关闭并清空对话窗口
        emits('addList', data.list) //调用组件通信，子传父
      } else {
        console.log(data.msg, data.list);

      }
    } else {
      console.log('error submit!')
      return false
    }
  })
}

function resetForm(formEl: FormInstance | undefined) {
  if (!formEl) return
  formEl.resetFields();
  dialogVisible.value = false
}
</script>
<style lang='less' scoped>
.file {
  display: none;
}
</style>